<template>
  <div>
    <i-card class="margin-bottom-10" dis-hover>
      <p slot="title">按条件搜索</p>
      <router-link :to="{path: '/admin/lives/new'}" slot="extra">
        <i-icon type="ios-plus"></i-icon>
        <span>新增直播</span>
      </router-link>
      <i-form @submit.native.prevent="search()">
        <filters @changed="filterChanged" :editions-visible="false"></filters>
        <div class="filter-item">
          <span>状态</span>
          <div>
            <i-tag v-bind:class="{'ivu-tag-blue': !query.status}" @click.native="statusChanged()">不限</i-tag>
            <i-tag v-for="status in statusList" v-bind:class="{'ivu-tag-blue': status.value == query.status}" :key="status.value" @click.native="statusChanged(status.value)">{{status.text}}</i-tag>
          </div>
        </div>
      </i-form>
    </i-card>
    <div class="clearfix margin-bottom-10">
      <i-page :total="total" :page-size="20" :current="query.page" size="small" @on-change="search" show-total class="pull-right" show-elevator></i-page>
    </div>
    <i-table :columns="columns" :data="lives" class="margin-bottom-10"></i-table>
    <div class="clearfix">
      <i-page :total="total" :page-size="20" :current="query.page" size="small" @on-change="search" show-total class="pull-right" show-elevator></i-page>
    </div>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import Filters from '../components/filters'
import GradeSpan from '../components/data-span/Grade'
import SubjectSpan from '../components/data-span/Subject'
import util from '../../libs/util'
export default {
  data() {
    let that = this
    return {
      query: {
        subject: null,
        page: 1,
        status: null
      },
      columns: [
        {
          key: 'title',
          title: '标题',
          render(h, params) {
            return h(
              'div',
              {
                attrs: {
                  class: 'item-title'
                }
              },
              [
                h('p', [
                  h('span', '['),
                  h(GradeSpan, {
                    props: {
                      index: params.row.grade
                    }
                  }),
                  h(SubjectSpan, {
                    props: {
                      index: params.row.subject
                    }
                  }),
                  h('span', ']'),
                  h(
                    'router-link',
                    {
                      props: {
                        to: {
                          path: '/lives/' + params.row.id
                        }
                      },
                      attrs: {
                        target: '_blank'
                      }
                    },
                    [h('span', this.row.title), h('small', this.row.subtitle)]
                  )
                ]),
                h(
                  'div',
                  Array.apply(null, this.row.tags).map(function(tag) {
                    return h('i-tag', tag)
                  })
                )
              ]
            )
          }
        },
        {
          key: 'startTime',
          width: 100,
          title: '开始时间'
        },
        {
          key: 'endTime',
          width: 100,
          title: '结束时间'
        },
        {
          key: 'createdBy',
          title: '作者',
          width: 140,
          render(h, params) {
            return h(
              'p',
              params.row.createdBy.code + ' / ' + params.row.createdBy.name
            )
          }
        },
        {
          title: '操作',
          width: 120,
          key: 'action',
          render: (h, params) => {
            return h('div', [
              h(
                'i-button',
                {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  on: {
                    click() {
                      that.$router.push({
                        name: 'edit-live',
                        params: { id: params.row.id }
                      })
                    }
                  }
                },
                '编辑'
              ),
              h(
                'i-button',
                {
                  props: {
                    type: 'text',
                    size: 'small'
                  },
                  on: {
                    click() {
                      that.$Modal.confirm({
                        title: '确认',
                        content: '确认删除直播【' + params.row.title + '】吗？',
                        okText: '确定',
                        cancelText: '取消',
                        loading: true,
                        onOk: () => {
                          that.removeLive({
                            id: params.row.id,
                            callback() {
                              that.$Modal.remove()
                              that.$Notice.success({
                                title: '直播管理',
                                desc: '删除直播成功'
                              })
                              that.search()
                            }
                          })
                        }
                      })
                    }
                  }
                },
                '删除'
              )
            ])
          }
        }
      ]
    }
  },
  components: {
    Filters
  },
  methods: {
    ...mapActions({
      searchlives: 'searchlives',
      removeLive: 'removeLive'
    }),
    search(page) {
      this.query.page = page || 1
      this.searchlives(this.query)
    },
    filterChanged(filter) {
      this.query.subject = filter.subject
      this.search()
    },
    statusChanged(status) {
      this.query.status = status
      this.search()
    }
  },
  computed: {
    ...mapGetters({
      lives: 'lives',
      total: 'totalLives'
    }),
    statusList() {
      return util.liveStatusList
    }
  },
  mounted() {
    this.search()
  },
  activated() {
    this.search()
  }
}
</script>

<style>
</style>
